<template>
	<view>
		<view class="bgFD2F55"></view>
		<image  mode="widthFix" :src="imgurl+'homebg.png'" class="image posiab"></image>
		<view class="con posire">
			<view :style="{paddingTop:shh - 3 +'px'}"></view>
			
			<view @click="navto('/pages/search')" :style="{width:width - menuButtonwidth - 35 +'px'}"
				class="size32 color666 bgF9F9F9 flex-a-i height80 ra16 boxshow " style="border:5px solid #fff;">
				<image mode="widthFix" src="/static/sou.png" class="image mr10 ml20 width40"></image>
				<view class="color999">查单词/词根/课程</view>
			</view>
			
			
			<view class="flex-ju-b size28 color666 mt30 mb30">
				<view @click="tablist(index)" class="flex-ju-c flex-col " :class="{active:tindex1==index}" v-for="(item,index) in ['课程推荐','词汇量版','考试专属版','其他课程']">
					{{item}}
					<view class="wh32-12 ra4  mt8">
						<image v-if="tindex1==index" mode="widthFix" src="/static/tuibottom.png" class="image width32"></image>
					</view>
				</view>
			</view>
			<nodata v-if="isdata"></nodata>
			<view v-for="(item,f) in list1" :key="f"  @click="navto('/pages/index/ke_detail?id='+item.courseId+'&isToll='+item.isToll+'&discountPrice='+item.discountPrice+'&wordCount='+item.wordCount+'&originalPrice='+item.originalPrice)" class="bgfff ra20 flex-a-i pg20-15 mb20" >
				<view>
					<image :src="item.coverImage" class="wh290-164 ra20"></image>
				</view>
				<view class="ml15 flex1">
					<view class=" height164 flex-ju-b flex-col"  style="align-items: start;">
					<view class="size28 bold one">{{item.courseName}}</view>
					<view class="size24 color666 two">{{item.summary}}</view>
					<view class="flex-ju-b  ">
						<view v-if="item.isLearning" class="wh140-48 ra5 bgF3F5F7 color999 size24 flex-ju-c">正在学习</view>
						<image v-else-if="item.isToll==0" mode="widthFix" src="/static/mianfei.png" class="width136 image"></image>
						<view v-else-if="item.isToll==2" class="bgFFEFF2 colorFD2F55 ra10 size24 wh140-50 flex-ju-c">去学习</view>
						<view v-else class="flex-a-i">
							<template v-if="item.discountPrice>0">
							<view class="size40 colorFD2F55 bold"><text class="size22">￥</text>{{item.discountPrice}}</view>
								<view class="size24 color666 deleted-text">{{item.originalPrice}}</view>
							</template>
							<view v-else class="size40 colorFD2F55 bold"><text class="size22">￥</text>{{item.originalPrice}}</view>
						</view>
						<view class="size24 color999">共{{item.wordCount}}词</view>
					</view>
				</view>
				</view>
			</view>
			 
			
		</view>
		
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				isdata:false,
				tindex1:0,
				list1:[],
				
				menuButtonwidth:0,
				width:0,
				page:1
			}
		},
		onReachBottom() {
			this.page++
			this.getlist()
		},
		onLoad() {
			this.getlist(4)
			this.menuButtonwidth = uni.getMenuButtonBoundingClientRect().width
			this.width =	uni.getSystemInfoSync().screenWidth
		},
		methods: {
			tapto(item){
				uni.navigateTo({
					url:"/pages/index/vocabulary_list?id="+item.courseId
				})
				// uni.navigateTo({
				// 	url:"/pages/index/vocabulary_list?id="+item.courseId
				// })
			},
			
			getlist(courseType){
				this.http('/api/course/home',{
					courseType: this.tindex1 == 0 ? 4 : this.tindex1,
					pageNo:this.page,
					pageSize:10,
				},'post').then(res=>{
					if(res.data.length){
						 var arr =[]
						res.data.map(item=>{
							arr.push(item.imageId)
						})
						
						this.httpimg(arr).then(ress=>{
							ress.data.map(item=>{
								res.data.map(items=>{
									if(item.fileId == items.imageId){
										items.coverImage = item.fileUrl
									}
								})
							})
							
							this.list1 = [...this.list1,...res.data]
							this.nodata(this.list1,this)
						})
						
					}else{
						this.list1 = [...this.list1,...res.data]
						this.nodata(this.list1,this)
					}
					
				})
			},
			
			tablist(index){
				this.tindex1 = index
				this.tindex1 = index
				this.getlist(index + 1)
			}
		}
	}
</script>

<style>
	page{
		background: #F3F5F7;
	}
.deleted-text{
		text-decoration: line-through;
	}
	.active{
		font-weight: bold;
		color: #000;
	}
	.boxshow{
		box-shadow: 0rpx 4rpx 30rpx 0rpx rgba(0,0,0,0.1);
	}
	
	.color07{
		color: rgba(255,255,255,0.7);
	}
</style>
